<blockquote class="layui-elem-quote">商品列表</blockquote>

<table id="goods-list" lay-filter="goods-list"></table>

<!--行工具条-->
<script type="text/html" id="goods-bar">
    <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/html" id="goods-pics">
    <!--使用模板语言遍历数组-->
    {{# layui.each(d.pics,function(index,item){ }}
    <img src="/upload/{{item.url}}" style="height: 50px">

    {{#  });  }}

</script>

<script>
    layui.use(['table'],function (){
        var table = layui.table,
            $=layui.$;

        //ajax获取数据，渲染到表格中
        table.render({
            elem: '#goods-list',
            url: '/api/goods',  //获取分类信息
            page: 'true',  //开启分页
            cols: [ [
                //渲染列
                {field: 'id',title: 'ID',},
                {field: 'name',title: '商品名',},
                {field: 'pics',title: '图片',templet: '#goods-pics'},
                {field: 'dscp',title: '描述',},
                {field: 'price',title: '售价',},
                {field: 'markPrice',title: '标价',},
                {field: 'color',title: '颜色',},
                {field: 'version',title: '版本',},
                {field: 'count',title: '库存',},
                {field: 'content',title: '内容',},
                {field: 'recom',title: '主页推荐',templet: function (d){
                        return ['不推荐','推荐'][d.recom];
                    }},

                {field: 'categoryId',title: '商品类别',templet:function (d){
                        return (d.category1)? d.category1.name : '';
                    }},
                {field: 'status',title: '状态', templet: function (d){
                        return ['上架','下架'][d.status];
                    }},
                {title: '操作',toolbar: '#goods-bar'},
            ] ],
            //数据解析  为什么？  因为分页了 所以需要解析
            parseData: function (d){
                return{
                    code: d.code,
                    msg: d.msg,
                    count: d.data.total,
                    data: d.data.list,

                };
            },
        });

        //行工具条的点击操作
        table.on('tool(goods-list)',function (obj){
            //layer.msg("行工具事件")
            if (obj.event=='edit'){
                // layer.msg("编辑")

                //向新页面传递数据
                sessionStorage.setItem('goods-edit',JSON.stringify(obj.data));//基于会话的存储

                //弹出层
                layer.open({
                    type: 2,
                    title: '编辑分类',
                    area: ['700px','700px'],
                    content: '/goods/edit.html', //页面的url
                    end: function (){
                        //弹出层关闭，刷新表格
                        table.reload('goods-list');
                    }
                });

            }else if (obj.event=='del'){
                // layer.msg("删除")
                layer.confirm('确定要删除当前记录嘛？',function (index){
                    //关闭弹出框
                    layer.close(index);

                    //点击确定时的操作
                    //ajax  /api/goods delete 普通参数传ID
                    $.ajax({
                        url: '/api/goods',
                        data: {id: obj.data.id},
                        type: 'delete',
                        dataType: 'json',
                        success: function (result){
                            if (result.code == 0){
                                layer.msg("删除成功");
                            }else{
                                layer.msg(result.msg);
                            }

                            //刷新表格
                            table.reload('goods-list');

                        },
                        error: function (){
                            layer.msg("请求失败");
                        }
                    });
                });
            }

        });
    });

</script>